<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        #id {
            position: relative;
        }

        .d1 {
            margin-top: 15px;
            margin-bottom: 15px;
            height: 30px;
        }

        img {
            position: absolute;
            top: 20px;
        }

        .s1 {
            position: absolute;
            top: 17px;
            left: 30px;
            font-size: 18px;
            padding-left: 5px;
        }

        .b1 {
            position: absolute;
            border: 1px #dcdfe6 solid;
            top: 10px;
            right: 120px;
            padding: 7px 18px;
            font-size: 14px;
            border-radius: 5px;
            background-color: #fff;
        }

        .b2 {
            position: absolute;
            border: 1px #dcdfe6 solid;
            top: 10px;
            right: 20px;
            padding: 7px 18px;
            font-size: 14px;
            border-radius: 5px;
            background-color: #fff;
        }

        .el-dropdown {
            vertical-align: top;
        }

        .el-dropdown+.el-dropdown {
            margin-left: 15px;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }

        .block {
            position: absolute;
            top: 440px;
            right: 0px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="d1">
            <img src="台账.png" width="20" height="20">
            <span class="s1">消防器材台账</span>
            <button class="b1">新增</button>
            <button class="b2">批量导入</button>
        </div>
        <template>
            <el-table :data="tableData" border style="width: 100%" :header-cell-style="
            {
                background:'#f5f7fa',
            }">
                <el-table-column prop="workzone" label="作业区" width="120" align="center">
                </el-table-column>
                <el-table-column prop="unit" label="单位" width="300" align="center">
                </el-table-column>
                <el-table-column prop="num" label="序号" width="120" align="center">
                </el-table-column>
                <el-table-column prop="specification" label="规格型号" width="120" align="center">
                </el-table-column>
                <el-table-column prop="quantity" label="数量" width="150" align="center">
                </el-table-column>
                <el-table-column prop="installlacation" label="配备地点" width="120" align="center">
                </el-table-column>
                <el-table-column prop="installdate" label="配备日期" width="80" align="center">
                </el-table-column>
                <el-table-column prop="medicinedate" label="换药日期" width="80" align="center">
                </el-table-column>
                <el-table-column prop="serialnum" label="编号" width="200" align="center">
                </el-table-column>
                <el-table-column prop="principal" label="负责人" width="100" align="center">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button @click="dialog = true" type="text" size="small">查看</el-button>
                        <el-button @click="dialog = true" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-drawer title="消防设施表" :before-close="handleClose" :visible.sync="dialog" direction="ttb"
                custom-class="demo-drawer" ref="drawer" style="width: 600px;margin: auto;font-size: 18px;" size="80%">
                <div class="demo-drawer__content">
                    <el-form ref="form" :model="form" label-width="120px">
                        <div>
                            <p class="p1">基础信息：</p>
                            <el-form-item label="所在作业区">
                                <el-input v-model="form.workzone"></el-input>
                            </el-form-item>
                            <el-form-item label="所在单位">
                                <el-input v-model="form.unit"></el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <p class="p1">数据信息：</p>
                            <el-form-item label="序号">
                                <el-input v-model="form.num" placeholder="请输入序号"></el-input>
                            </el-form-item>
                            <el-form-item label="员工名称">
                                <el-input v-model="form.name" placeholder="请输入员工名称"></el-input>
                            </el-form-item>
                            <el-form-item label="规格型号">
                                <el-input v-model="form.specification" placeholder="请输入规格型号"></el-input>
                            </el-form-item>
                            <el-form-item label="数量">
                                <el-input v-model="form.quantity" placeholder="请输入数量"></el-input>
                            </el-form-item>
                            <el-form-item label="配备地点">
                                <el-input v-model="form.installlacation" placeholder="请输入配备地点"></el-input>
                            </el-form-item>
                            <el-form-item label="配备日期">
                                <el-col :span="11">
                                    <el-date-picker type="date" placeholder="选择配备日期" v-model="form.installdate"
                                        style="width: 100%;"></el-date-picker>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="换药日期">
                                <el-col :span="11">
                                    <el-date-picker type="date" placeholder="选择换药日期" v-model="form.medicinedate"
                                        style="width: 100%;"></el-date-picker>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="编号">
                                <el-input v-model="form.serialnum" placeholder="请输入编号"></el-input>
                            </el-form-item>
                            <el-form-item label="负责人">
                                <el-input v-model="form.principal" placeholder="请输入负责人"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">取消</el-button>
                                <el-button>确定</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
            </el-drawer>

            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[5, 10, 20, 30]" :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper" :total="50">
                </el-pagination>
            </div>
        </template>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var Main = {
        methods: {
            handleClick(row) {
                console.log(row);
            },
            handleClose(done) {
                if (this.loading) {
                    return;
                }
                this.$confirm('确定要提交表单吗？')
                    .then(_ => {
                        this.loading = true;
                        this.timer = setTimeout(() => {
                            done();
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.loading = false;
                            }, 400);
                        }, 2000);
                    })
                    .catch(_ => { });
            },
            cancelForm() {
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            }
        },

        data() {
            return {
                tableData: [{
                    workzone: 1,
                    unit: '第四作业区榆二联党支部',
                    num: '王敏',
                    name: '1102',
                    specification: '510231',
                    quantity: '女',
                    installlocation: '2002-6-2',
                    installdate: '大学',
                    medicinedate: '',
                    serialnum: '大学',
                    principal: '汉',
                }, {
                    num: 1,
                    branch: '第四作业区榆二联党支部',
                    name: '王敏',
                    senum: '1102',
                    id: '510231',
                    sex: '女',
                    date: '2002-6-2',
                    edu: '大学',
                    hde: '大学',
                    nation: '汉',
                    native: '四川成都',
                    tel: '13162587789',
                    email: 'lll@cn',
                }, {
                    num: 1,
                    branch: '第四作业区榆二联党支部',
                    name: '王敏',
                    senum: '1102',
                    id: '510231',
                    sex: '女',
                    date: '2002-6-2',
                    edu: '大学',
                    hde: '大学',
                    nation: '汉',
                    native: '四川成都',
                    tel: '13162587789',
                    email: 'lll@cn',
                }
                ],
                table: false,
                dialog: false,
                loading: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '80px',
                timer: null,
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>

</html>